<template>
	<view class="buttonTab" :style="{ 'border-radius': props.isRadius ? '80rpx':'0rpx', 'gap': `${props.gap}rpx`, '--primary-color': props.currentBg }">
		<view 
			class="buttonTab-item" 
			v-for="(item,index) in list" 
			:key="item.name"
			:class="{ 'buttonTab-current': currentTab == index }"
			@click="changeCurrentTab(index)"
		>
			<view :class="{ 'buttonTab-point': item.point }">{{ item.name }}</view>
		</view>	
	</view>
</template>

<script setup>
import { ref,defineProps,onMounted,defineEmits } from 'vue'

/**
 * buttonTab 按钮
 * @description 切换按钮选项
 * @property {Boolean} isRadius 按钮是否圆角
 * @property {Number} currentIndex 当前选中第几个
 * @property {String} currentBg 按钮选中背景样式
 * @property {Number} gap 按钮子元素间隔
 * @property {Array} list 按钮数据源 name: 子元素名称 point:是否有消息提示
 * @event {Function} clickHandle 按钮元素事件
 */
const props = defineProps({
	isRadius: {
		type: Boolean,
		default: true
	},
	currentIndex: {
		type: Number,
		default: 0
	},
	currentBg: {
		type: String,
		default: 'yellow',
	},
	gap: {
		type: Number,
		default: 0,
	},
	list: {
		type: Array,
		defalut: []
	},
});

const emits = defineEmits(["clickHandle"]);

const currentTab = ref(0);
const changeCurrentTab = (index) => {
	currentTab.value = index;
	
	//返回当前选中index
	emits('clickHandle',index)
}

const list = ref([]);

onMounted(()=>{
	currentTab.value = props.currentIndex < props.list.length && props.currentIndex > 0 ? props.currentIndex : 0;
	list.value = props.list;
})
</script>

<style lang="scss">
.buttonTab {
	display: flex;
	border-radius: 50rpx;
	height: 80rpx;
	box-sizing: border-box;
	border: 1rpx solid #ccc;
	overflow: hidden;
	.buttonTab-item {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1 0 0;
		color: #ccc;
		&.buttonTab-current {
			color: black;
			background-color: var(--primary-color);
		}
		
		.buttonTab-point {
			position: relative;
			&::after {
				content: '';
				width: 15rpx;
				height: 15rpx;
				border-radius: 50%;
				position: absolute;
				background-color: red;
				right: -10rpx;
				top: -10rpx;
			}
		}
	}
}
</style>